<template>
    <div class="pagination">
        <button @click="prevPage" :disabled="currentPage === 1">＜</button>
        <button 
            v-for="page in visibleTotalPages"
            :key="page"
            @click="goToPage(page)"
            :class="{ 'active': currentPage === page }"
            >
            {{page}}
         </button>
        <button @click="nextPage" :disabled="currentPage === totalPages">＞</button>

        <select 
            v-model="localItemsPerPage"
            @change="changeItemsPerPage">
            <option 
                v-for="option in itemsPerPageOptions"
                :key="option"
                :value="option"> 
                {{option}} 条/页
            </option>
        </select>
        <span>跳至</span>
        <input
            type="number"
            v-model.number="localCurrentPage"
            @input="goToPage(localCurrentPage)"
            min="1"
            :max="totalPages" />
        <span>页</span>
    </div>
</template>

<script>
// 分页组件
export default {
    // 组件名称
    name: "PagingDevice",
    // 组件数据
    data() {
        // 返回本地数据
        return {
            // 本地当前页码，初始值为传入的当前页码
            localCurrentPage:this.currentPage,
            // 本地每页显示条目数，初始值为传入的每页显示条目数
            localItemsPerPage:this.itemsPerPage,
            // 每页显示条目数的选项列表
            itemsPerPageOptions: [5, 10, 20, 50],
        };
    },
    // 组件属性
    props: {
        // 设备列表，类型为数组，默认值为空数组
        devices: {
            type: Array,
            default: () => [],
        },
        // 总页数，类型为数字，必填
        totalPages: {
            type: Number,
            Required: true,
        },
        // 当前页码，类型为数字，默认值为1，必填
        currentPage: {
            type: Number,
            default: 1,
            Required: true,
        },
        // 每页显示条目数，类型为数字，默认值为5，必填
        itemsPerPage: {
            type: Number,
            default: 5,
            Required: true,
        },
    },
    // 计算属性
    computed: { 
        // 分页后的设备列表
        paginatedDevices() {
            // 计算起始索引和结束索引
            const startIndex = (this.currentPage - 1) * this.itemsPerPage;
            const endIndex = startIndex + this.itemsPerPage; 
            // 返回分页后的设备列表
            return this.devices.slice(startIndex, endIndex);
        }, 
        visibleTotalPages() {
            const pages = [];
            if(this.totalPages < 5){
                for(let i = 1;i<=this.totalPages;i++){
                    pages.push(i);
                }
            } else if(this.localCurrentPage > this.totalPages - 5){
                for(let i = this.totalPages-4;i<=this.totalPages;i++){
                    pages.push(i);
                }
            } else if(this.localCurrentPage < 4){
                for(let i = 1;i < 4;i++){
                    pages.push(i);
                }
                if(this.totalPages >= 4){
                    pages.push("...");
                    pages.push(this.totalPages);
                } 
            } else{
                const startValue = this.localCurrentPage>3?this.localCurrentPage:1;
                //const start = Math.max(1, this.localCurrentPage - 2);
                const start = Math.max(startValue, this.localCurrentPage - 2);
                const end = Math.min(this.totalPages, this.localCurrentPage + 2);

                for (let i = start; i <= end; i++) {
                    pages.push(i);
                }  
                // 如果总页数大于5，且当前页在最后两页内，添加最后一页
                if (this.totalPages > 3 && this.localCurrentPage < this.totalPages - 2) { 
                    pages.push("...");
                    pages.push(this.totalPages);
                } 
            }
 
            return pages;
        },
    },
    // 组件方法
    methods: {
        // 上一页
        prevPage() {
            if (this.currentPage > 1) {
                this.localCurrentPage = this.currentPage - 1;
                this.$emit('pageChange', this.currentPage - 1);
            }
        },
        // 下一页
        nextPage() {
            if (this.currentPage < this.totalPages) {
                if(this.currentPage <= this.totalPages-5){
                    this.localCurrentPage = this.currentPage + 1;
                } 
                this.$emit('pageChange', this.currentPage + 1); 
            }
        },
        // 跳转到指定页
        goToPage(page) { 
            page = page>this.totalPages?this.totalPages:page;
            if (page >= 1 && page <= this.totalPages) {
                this.localCurrentPage = page;
                this.$emit('pageChange', page); 
            }else if(page == "..."){ 
                this.localCurrentPage = this.visibleTotalPages[2]+1; 
                this.$emit('pageChange', this.localCurrentPage); 
            }
        },
        // 每页显示条目数改变时触发
        changeItemsPerPage() {
            this.$emit('pageChange', 1); 
            this.$emit('itemsPerPageChange', this.localItemsPerPage);  
            // 重置当前页为第一页
            this.localCurrentPage = 1;
        },
    },
};
</script>

<style scoped>
@import url('@/assets/css/pagingdevice.css');
</style>